<template>
   <div class="my-tag">
              <input
                class="input"
                type="text"
                placeholder="输入标签"
                v-if='!show' 
                ref='ipt'  
                @blur='lose'
                @keydown.enter="save"
              />
              <!-- 给 文字 和 输入框 用v-if 和 v-else 绑定来判断谁显示 -->
              <!-- 利用ref来获取input元素 -->
              <!-- blur 失去焦点的时候触发 -->
              <!-- 键盘回车键 按下去的时候 触发save函数 -->
              <div class="text" @dblclick="change" v-else>{{item.tag}}</div>
              <!-- 双击的时候触发change函数 -->
            </div>
</template>

<script>
export default {
  props:{
    item:{
      type:Object,
      required:true
    }
  },
  data(){
    return{
      show:'true'
    }
  },
  methods:{
    change(){
      this.show = false
      this.$nextTick(()=>{   //因为vue更新DOM是异步的，一开始input框还没创建，所以要用nextTick方法，他接受一个函数作为参数，此函数在DOM更新之后执行
        this.$refs.ipt.focus()   
        this.$refs.ipt.value = this.item.tag
      })
    },
    lose(){
      this.show = true
    },
    save(){
      this.$nextTick(()=>{    //同上，vue更新DOM异步，需要这个函数包裹下，等这个iput框输入到DOM上之后，子传父，把收集的input框的value值和对应的那项的id值发给父组件
         this.$emit('save',this.$refs.ipt.value,this.item.id)
        
         this.show = true  //回车完毕之后 将input输入框隐藏起来
      })
    }
  }
}
</script>

<style>

</style>